var images = {}; 

// Add in prepareCanvas Function 
var breathInc = 0.1;
var breathDir = 1;
var breathAmt = 0;
var breathMax = 2;
var breathInterval = setInterval(updateBreath, 1000 / fps);

var maxEyeHeight = 14;
var curEyeHeight = maxEyeHeight;
var eyeOpenTime = 0;
var timeBtwBlinks = 4000;
var blinkUpdateTime = 200;
var blinkTimer = setInterval(updateBlink, blinkUpdateTime);
var jumping = false;


loadImage("leftArm");

loadImage("legs");

loadImage("torso"); 

loadImage("rightArm");

loadImage("head"); 

loadImage("hair"); 

loadImage("leftArm-jump");
loadImage("legs-jump");
loadImage("rightArm-jump");

//resource loaded
var totalResources = 9; 

var numResourcesLoaded = 0; 

var fps = 30; 

//redraw
var charX = 245; 

var charY = 185;



function prepareCanvas(canvasDiv, canvasWidth, canvasHeight) { 

// Create the canvas (Neccessary for IE because it doesn't know what a canvas element is) 

canvas = document.createElement('canvas'); 

canvas.setAttribute('width', canvasWidth); 

canvas.setAttribute('height', canvasHeight); 

canvas.setAttribute('id', 'canvas'); 

canvasDiv.appendChild(canvas); 

if(typeof G_vmlCanvasManager != 'undefined') { 

canvas = G_vmlCanvasManager.initElement(canvas); 

} 

context = document.getElementById('canvas').getContext("2d"); 

//loadImage here 

}

function loadImage(name) 

{ 

images[name] = new Image(); 

images[name].onload = function() { 

resourceLoaded(); 

} 

images[name].src = "images/" + name + ".png"; 

}

function resourceLoaded() 

{ 

numResourcesLoaded += 1; 

if(numResourcesLoaded === totalResources) { 

setInterval(redraw, 1000 / fps); 

} 

} 

function redraw() { 

var x = charX; 

var y = charY; 
var jumpHeight = 45;

canvas.width = canvas.width; // clears the canvas 
drawEllipse(x + 40, y + 29, 160, 6); // Shadow
context.drawImage(images["leftArm"], x + 40, y - 42); 

context.drawImage(images["legs"], x, y); 

context.drawImage(images["torso"], x, y - 50); 

context.drawImage(images["rightArm"], x - 15, y - 42); 

context.drawImage(images["head"], x - 10, y - 125); 

context.drawImage(images["hair"], x - 37, y - 138); 

drawEllipse(x + 47, y - 68, 8, 14); // Left Eye
drawEllipse(x + 58, y - 68, 8, 14); // Right Eye
// Draw shadow
if (jumping) {
drawEllipse(x + 40, y + 29, 100 - breathAmt, 4);
} else {
drawEllipse(x + 40, y + 29, 160 - breathAmt, 6);
}
if (jumping) {
y -= jumpHeight;
}
if (jumping) {
context.drawImage(images["leftArm-jump"], x + 40, y - 42 - breathAmt);
} else {
context.drawImage(images["leftArm"], x + 40, y - 42 - breathAmt);
}
if (jumping) {
context.drawImage(images["legs-jump"], x, y- 6);
} else {
context.drawImage(images["legs"], x, y);
}
context.drawImage(images["torso"], x, y - 50);
context.drawImage(images["head"], x - 10, y - 125 - breathAmt);
context.drawImage(images["hair"], x - 37, y - 138 - breathAmt);
if (jumping) {
context.drawImage(images["rightArm-jump"], x - 35, y - 42 - breathAmt);
} else {
context.drawImage(images["rightArm"], x - 15, y - 42 - breathAmt);
}
//drawEllipse(x + 47, y - 68 - breathAmt, 8, 14); // Left Eye
//drawEllipse(x + 58, y - 68 - breathAmt, 8, 14); // Right Eye

drawEllipse(x + 47, y - 68 - breathAmt, 8, curEyeHeight);
drawEllipse(x + 58, y - 68 - breathAmt, 8, curEyeHeight);
}
function drawEllipse(centerX, centerY, width, height) {
context.beginPath();
context.moveTo(centerX, centerY - height/2);
context.bezierCurveTo(
centerX + width/2, centerY - height/2,
centerX + width/2, centerY + height/2,
centerX, centerY + height/2
);
context.bezierCurveTo(
centerX - width/2,
centerY + height/2,
centerX - width/2,
centerY - height/2, centerX, centerY - height/2
);
context.fillStyle = "black";
context.fill(); context.closePath();
}
function updateBreath() {
if (breathDir === 1) { // breath in
breathAmt -= breathInc;
if (breathAmt < -breathMax) {
breathDir = -1;
}
} else { // breath out
breathAmt += breathInc;
if(breathAmt > breathMax) {
breathDir = 1;
}
}
}
function updateBlink() {
eyeOpenTime += blinkUpdateTime;
if(eyeOpenTime >= timeBtwBlinks){
blink();
}
}
function blink() {
curEyeHeight -= 1;
if (curEyeHeight <= 0) {
eyeOpenTime = 0; curEyeHeight = maxEyeHeight;
} else {
setTimeout(blink, 10);
}
}

function jump() {
if (!jumping) {
jumping = true;
setTimeout(land, 500);
}
}
function land() {
jumping = false;
}
